<template>
  <div>
    <div class="bg-in">
      <div>
<!--        <span class="font" style="margin-right:20px">所属部门: {{ orderOutboundInfo.dept_name }}</span>-->
        <span class="font">仓库: {{ orderOutboundInfo.warehouse_name }}</span>
        <span style="margin-left: 50px" class="font">
          出库日期:&nbsp;
          <el-date-picker style="width: 200px" v-model="orderOutboundInfo.out_time" value-format="timestamp"
                          type="datetime" :clearable="false" :editable="false" :disabled="$route.name === 'orderOutboundDetail'" />
        </span>
        <span style="margin-left: 50px" class="font" v-if="id">提货人:&nbsp;
          {{ orderOutboundInfo.warehouse_consignee_name ? orderOutboundInfo.warehouse_consignee_name : '无' }}
        </span>
        <span style="margin-left: 50px" class="font" v-if="!id">提货人:&nbsp;
          <!-- <el-input v-model="orderOutboundInfo.warehouse_consignee" type="text" :minlength="2" :maxlength="20"
            placeholder="请输入提货人" style="width:150px;"></el-input> -->
          <el-select v-model="orderOutboundInfo.warehouse_consignee_id">
            <el-option v-for="item in adminList" :key="item.id" :label="item.real_name" :value="item.id" />
          </el-select>
        </span>
      </div>
      <div class="order-item" style="display:flex;align-items: center;">
<!--        <span class="font" v-if="id">审核人:&nbsp;{{ orderOutboundInfo.audit_by_name ? orderOutboundInfo.audit_by_name : '无'-->
<!--        }}</span>-->
<!--        <span class="font">销售专员:&nbsp;{{ orderOutboundInfo.distribution_name ? orderOutboundInfo.distribution_name :-->
<!--          '无' }}</span>-->
      </div>
      <div class="order-item" v-for="order in orderOutboundInfo.order_list">
        <div>
          <span class="font">订单编号:</span>{{ order.order_sn }}
        </div>
        <el-divider></el-divider>
        <div v-for="orderItem in order.order_item_list">
          <div class="flex">
            <div>
              商品名称: {{ orderItem.product_name }}
            </div>
            <div>
              商品编号: {{ orderItem.product_sn }}
            </div>
            <div>
              规格型号: {{ orderItem.product_specification }}
            </div>
            <div>
              购买数量: {{ orderItem.num }}
            </div>
            <div>
              <el-button class="button" size="mini" type="primary" @click="handleSelectWarehouseEntryBatch(orderItem)"
                         :disabled="$route.name === 'orderOutboundDetail'">选择库存</el-button>
            </div>
          </div>

          <el-table :data="orderItem.batch_list" border :cell-style="{ textAlign: 'center' }"
                    :header-cell-style="{ textAlign: 'center' }" style="width: 100%; margin-top: 20px;">
            <el-table-column label="入库单号">
              <template slot-scope="scope">
                {{ scope.row.warehouse_entry_sn }}
              </template>
            </el-table-column>
            <el-table-column label="批次号">
              <template slot-scope="scope">
                {{ scope.row.batch_sn }}
              </template>
            </el-table-column>
            <el-table-column label="库存数量">
              <template slot-scope="scope">
                {{ scope.row.remain_num }}
              </template>
            </el-table-column>
            <el-table-column label="出库数量">
              <template slot-scope="scope">
                <el-input :maxlength="22" v-model="scope.row.out_num" :disabled="$route.name === 'orderOutboundDetail'" />
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <el-card v-if="orderOutboundInfo.status === 'SHIP'">
        <el-row :gutter="0">
          <el-col :span="4">配送方式</el-col>
          <el-col :span="8">{{ orderOutboundInfo.delivery_type === 'express' ? '物流配送' : '自提' }}</el-col>
          <el-col :span="4">物流费用</el-col>
          <el-col :span="8">{{ orderOutboundInfo.freight_price }}</el-col>
        </el-row>
        <el-row :gutter="0">
          <el-col :span="4">提货人</el-col>
          <el-col :span="8">{{ orderOutboundInfo.consignee }}</el-col>
          <span v-if="orderOutboundInfo.delivery_type !== 'express'">
            <el-col :span="4">自提点</el-col>
            <el-col :span="8">{{ orderOutboundInfo.store_name }}</el-col>
          </span>
          <span v-else>
            <el-col :span="4">物流公司</el-col>
            <el-col :span="8">{{ orderOutboundInfo.logistics_company_name }}</el-col>
          </span>
        </el-row>
        <el-row :gutter="0" v-if="orderOutboundInfo.delivery_type === 'express'">
          <el-col :span="4">物流单号</el-col>
          <el-col :span="8">{{ orderOutboundInfo.tracking_number }}</el-col>
        </el-row>
      </el-card>
      <div class="footer">
        <el-button type="primary" @click="saveErpWarehouseOut" v-if="$route.name !== 'orderOutboundDetail'">保存
        </el-button>
        <el-button type="primary" @click="roBack()" v-if="$route.name !== 'orderOutboundDetail'">返回
        </el-button>
        <el-button type="primary" @click="roBack2()" v-if="$route.name === 'orderOutboundDetail'">返回
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>

import * as API_BasicSetting from '@/api/basicSetting'
import * as API_order from '@/api/order'
import * as API_Setting from '@/api/setting'
import * as API_Auth from '@/api/auth'
import { Foundation } from '~/ui-utils'
import { mapGetters } from 'vuex'

export default {
  name: 'orderOutbound',
  data() {
    return {
      deptList: [],
      orderIds: '',
      orderOutboundInfo: {
        warehouse_consignee_id: ''
      },
      id: '',
      adminList: []
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler(newVal) {
        if (this.$route.name === 'orderOutboundDetail') {
          this.id = this.$route.params.id
          this.GET_WarehouseOutDetail()
        } else {
          this.orderIds = this.$route.params.orderIds
          this.GET_WarehouseOutPreview()
        }
      }
    }
  },
  computed: {
    ...mapGetters(['user'])
  },
  mounted() {
    this.GET_AdministratorList()
  },
  methods: {
    /** 获取人员列表 */
    GET_AdministratorList() {
      API_Auth.getAdministratorList({
        page_no: 1,
        page_size: 9999,
        user_state: 0
      }).then(response => {
        this.adminList = response.data
      })
    },
    saveErpWarehouseOut() {
      API_order.addErpWarehouseOut({
        order_list: this.orderOutboundInfo.order_list,
        warehouse_consignee_id: this.orderOutboundInfo.warehouse_consignee_id,
        out_time: this.orderOutboundInfo.out_time / 1000
      }).then(response => {
        this.$message.success('出库成功！')
        const { callback } = this.$route.params
        if (typeof callback === 'function') callback()
        this.$store.dispatch('delCurrentViews', {
          view: this.$route,
          $router: this.$router
        })
        this.$router.push({ name: 'order' })
      })
    },
    // 选择批次
    async handleSelectWarehouseEntryBatch(items) {
      const goodsData = await this.$EnwarehouseEntryBatch({
        goodsApi: 'admin/erp/warehouseEntryBatch',
        selectedIds: items.batch_list ? items.batch_list.map(item => item.id) : [],
        purchasePlanApiParams: { warehouse_id: this.orderOutboundInfo.warehouse_id, product_id: items.product_id },
        showWarehouseSearch: false
      })
      items.batch_list = goodsData.purchasePlans.map(item => {
        item.batch_id = item.id
        item.batch_sn = item.sn
        return item
      })
    },
    roBack2() {
      const { callback } = this.$route.params
      if (typeof callback === 'function') callback()
      this.$store.dispatch('delCurrentViews', {
        view: this.$route,
        $router: this.$router
      })
      this.$router.push({ name: 'warehouseOut' })
    },
    roBack() {
      const { callback } = this.$route.params
      if (typeof callback === 'function') callback()
      this.$store.dispatch('delCurrentViews', {
        view: this.$route,
        $router: this.$router
      })
      this.$router.push({ name: 'order' })
    },
    /** 调拨单商品明细API*/
    GET_WarehouseOutDetail() {
      API_order.getWarehouseOutInfo(this.id).then(response => {
        this.orderOutboundInfo = response
        this.orderOutboundInfo.out_time = response.out_time * 1000
      })
    },
    /** 出库前预览 */
    GET_WarehouseOutPreview() {
      API_order.getWarehouseOutPreview({ order_id_list: this.orderIds }).then(response => {
        this.dept_id = response.dept_id
        this.orderOutboundInfo = response
        this.orderOutboundInfo.out_time = new Date().getTime()
        this.$set(this.orderOutboundInfo, 'warehouse_consignee_id', this.user.uid)
      })
    }
  }
}
</script>
<style type="text/scss" lang="scss" scoped>
/deep/.el-card {
  margin-top: 30px;
}

.el-row {
  border-bottom: 1px solid #ebeef5;
  position: relative;
}

.el-col {
  padding: 10px;
  position: relative;

  &:not(:first-child)::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background-color: #ebeef5;
  }
}

/deep/ .el-card__body {
  margin: 10px;
  padding: 0;
  border: 1px solid #ebeef5;
  border-bottom: 0;
  font-size: 12px;
}

.bg-in {
  background-color: #fff;
  margin: 10px;
  padding: 55px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;

  div {
    flex: 1;
    color: #909399;
    font-size: 15px;
  }
}

.font {
  color: #606266;
  padding: 0 12px 0 0;
}

.order-item {
  margin-top: 30px;
}

.footer {
  width: 100%;
  padding: 10px;
  bottom: 0px;
  text-align: center;
  z-index: 999;
  margin-top: 30px;
}
</style>

